<template>
	<view class="h100">
		<view style="width: 750rpx; height: calc(100% - 200px)">
			<jp-signature ref="signatureRef"></jp-signature>
		</view>
		<view>
			<button @click="clear">清空</button>
			<button @click="">撤消</button>
			<button @click="save">保存</button>
		</view>
	</view>
</template>
<script>
import config from '@/config';
const baseUrl = config.baseUrl;
import { getToken } from '@/utils/auth';
export default {
	data() {
		return {
			url: '',
		};
	},
	methods: {
		save() {
			let that = this
			uni.showModal({
				content: '请确认，是否提交上传的签名！',
				success: function (res) {
					if (res.confirm) {
						that.$refs.signatureRef.canvasToTempFilePath({
							success: (res) => {
								// 是否为空画板 无签名
								console.log(res);
								// 生成图片的临时路径
								// H5 生成的是base64
								that.url = res.tempFilePath;
								uni.uploadFile({
									url: baseUrl + '/alone/uploadImages',
									name: 'file',
									filePath: res.tempFilePath,
									// files: res.tempFilePaths,
									header: {
										// Authorization: 'Bearer ' + getToken(),
										userToken: getToken(),
									},
									success: (uploadFileRes) => {
										console.log(
											'uploadFileRes',
											uploadFileRes,
										);
										if (uploadFileRes.statusCode !== 200) {
											uni.showToast({
												title: uploadFileRes.errMsg,
												icon: 'none',
											});
										} else {
											const tempData = [
												{
													url: uploadFileRes.data,
												},
											];
											const eventChannel =
												that.getOpenerEventChannel();
											eventChannel.emit('addOk', {
												fileList: tempData,
											});
											setTimeout(() => {
												uni.navigateBack();
											}, 1000);
										}
									},
									fail: (err) => {
										console.log('fail====>', err);
										uni.showToast({
											title: '上传失败',
											icon: 'none',
										});
									},
								});
							},
						});
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				},
			});
		},
		clear() {
			this.$refs.signatureRef.clear();
		},
		undo() {
			this.$refs.signatureRef.undo();
		},
	},
};
</script>

<style lang="scss">
.h100 {
	height: 100%;
}
</style>